// 发表评论组件
import { useState, useRef } from 'react';
// 导入图片
import avatar from '../avatar.jpg';

export const Forms = (props) => {
  // 评论输入
  const [txt, setTxt] = useState('');

  // 输入框ref
  const inputRef = useRef(null);

  const handleTxt = (e) => {
    setTxt(e.target.value);
  };

  // 添加评论事件处理函数
  const handleAdd = () => {
    // 0 数据验证
    if (!txt.trim()) return alert('评论内容不能为空');

    // 1 传给父组件用户的输入
    props.addComment(txt);

    // 2 自身组件的处理
    setTxt('');

    // 3 设置光标
    inputRef.current.focus();
  };

  return (
    // 发表评论区
    <div className="comment-send-container">
      <div>
        <img className="user-head" src={avatar} alt="头像" />
      </div>
      <div className="comment-send">
        <div className="textarea-container">
          <textarea
            cols="80"
            rows="5"
            placeholder="发条友善的评论"
            className="ipt-txt"
            value={txt}
            onChange={handleTxt}
            ref={inputRef}
          />
          <button className="comment-submit" onClick={handleAdd}>
            发表评论
          </button>
        </div>
      </div>
    </div>
  );
};

// export class Forms extends React.Component {
//   constructor() {
//     super();
//     this.state = {
//       txt: '',
//     };
//     // 输入框ref
//     this.inputRef = React.createRef();
//   }

//   handleTxt = (e) => {
//     this.setState({
//       txt: e.target.value,
//     });
//   };

//   // 添加评论事件处理函数
//   handleAdd = () => {
//     // 0 数据验证
//     if (!this.state.txt.trim()) return alert('评论内容不能为空');

//     // 1 传给父组件用户的输入
//     this.props.addComment(this.state.txt);

//     // 2 自身组件的处理
//     this.setState({
//       txt: '',
//     });

//     // 3 设置光标
//     this.inputRef.current.focus();
//   };
//   render() {
//     return (
//       // 发表评论区
//       <div className="comment-send-container">
//         <div>
//           <img className="user-head" src={avatar} alt="头像" />
//         </div>
//         <div className="comment-send">
//           <div className="textarea-container">
//             <textarea
//               cols="80"
//               rows="5"
//               placeholder="发条友善的评论"
//               className="ipt-txt"
//               value={this.state.txt}
//               onChange={this.handleTxt}
//               ref={this.inputRef}
//             />
//             <button className="comment-submit" onClick={this.handleAdd}>
//               发表评论
//             </button>
//           </div>
//         </div>
//       </div>
//     );
//   }
// }
